/* 内河涌 弹框 基础信息页 
 * @ 劳兆城 
 * @ 2017-08-10*/
<template>
	<div class="water-base">
		<div class="base-row">
			<div class="base-box">
				<div class="base-title">河涌类别</div>
				<div class="base-content">
					<Select 
						v-model="water.rivprop" 
						size="small">
						<Option value="A">外江</Option>
						<Option value="F">主干涌</Option>
						<Option value="B">支干涌</Option>
						<Option value="C">支涌</Option>
						<Option value="D">毛涌</Option>
						<Option value="E">水库</Option>
					</Select>									
				</div>
			</div>
			<div class="base-box">
				<div class="base-title">河涌名字</div>
				<div class="base-content">
					<Input v-model="water.rivname" size="small" placeholder="请输入"></Input>								
				</div>
			</div>
			<div class="base-box">
				<div class="base-title">河涌代码</div>
				<div class="base-content">
					<Input v-model="water.rivcode" size="small" placeholder="请输入"></Input>									
				</div>
			</div>
			<div class="base-box">
				<div class="base-title" style="width: 120px;">控制集雨面积(km2)</div>			
				<div class="base-content">
					<Input v-model="water.ctlarea" size="small" placeholder="请输入"></Input>					
				</div>
			</div>
		</div>
		<div class="base-row">
			<div class="base-box">
				<div class="base-title">地貌描述</div>
				<div class="base-content">
					<Input 
						v-model="water.geodesc" 
						size="small" 
						type="textarea" 
						class="base-textarea" 
						placeholder="请输入"></Input>								
				</div>
			</div>
		</div>
		<div class="base-row">
			<div class="base-box">
				<div class="base-title">起点位置</div>
				<div class="base-content">
					<Input v-model="water.startplace" size="small" placeholder="请输入"></Input>								
				</div>
			</div>
			<div class="base-box">
				<div class="base-title">起点接涌</div>
				<div class="base-content">
					<Poptip 
						v-model="showStartRiver" 
						@on-popper-hide="poptipHide" 
						placement="bottom-start" 
						width="500">
						<Input v-model="water.startstrivname" size="small" placeholder="请选择"></Input>
						<div slot="content" style="overflow: hidden;">
							<div>
								<span>河涌代码&nbsp;&nbsp;<Input v-model="search.rivcode" size="small" placeholder="请输入" style="width: 100px;"></Input></span> &nbsp;&nbsp;
								<span>河涌名字&nbsp;&nbsp;<Input v-model="search.rivname" size="small" placeholder="请输入" style="width: 100px;"></Input></span>
								<span><Button @click.native="searchClick" type="text">查询</Button></span>
							</div>
							<div v-if="showStartRiver" style="margin-top: 5px;">
								<Table @on-row-click="startClick" :columns="table.thead" :data="table.tbody" height="200" size="small" border></Table>
								<Page :total="table.total" @on-change="pageChange" size="small" show-total class="pull-right" style="margin-top: 5px;"></Page>
							</div>
						</div>
					</Poptip>
				</div>
			</div>
			<div class="base-box">
				<div class="base-title" style="width: 65px;">起点桩号段</div>
				<div class="base-content">
					<Input v-model="water.startsegcode" size="small" placeholder="请输入"></Input>								
				</div>
			</div>
			<div class="base-box">
				<div class="base-title">起点经度</div>
				<div class="base-content">
					<Input v-model="water.mstartlng" size="small" placeholder="请输入"></Input>								
				</div>
			</div>
			<div class="base-box">
				<div class="base-title">起点纬度</div>
				<div class="base-content">
					<Input v-model="water.mstartlat" size="small" placeholder="请输入"></Input>
				</div>
			</div>
		</div>
		<div class="base-row">
			<div class="base-box">
				<div class="base-title"style="width: 80px;">起点宽度(m)</div>
				<div class="base-content">
					<Input-number v-model="water.width" size="small" placeholder="请输入"></Input-number>
				</div>
			</div>
			<div class="base-box">
				<div class="base-title" style="width: 110px;">起点涌底高程(km2)</div>
				<div class="base-content">
					<Input-number v-model="water.height" size="small" placeholder="请输入"></Input-number>
				</div>
			</div>
			<div class="base-box">
				<div class="base-title" style="width: 80px;">起点水船闸</div>
				<div class="base-content">
					<Select v-model="water.startShip" size="small" filterable>
						
					</Select>								
				</div>
			</div>
			<div class="base-box">
				<div class="base-title" style="width: 80px;">起点排灌泵站</div>
				<div class="base-content">
					<Select v-model="water.startpPumping" size="small" filterable>
						
					</Select>							
				</div>
			</div>
		</div>	
		<div class="base-row">
			<div class="base-box">
				<div class="base-title">终点位置</div>
				<div class="base-content">
					<Input v-model="water.endplace" size="small" placeholder="请输入"></Input>								
				</div>
			</div>
			<div class="base-box">
				<div class="base-title">终点接涌</div>
				<div class="base-content">
					<Poptip 
						v-model="showEndRiver" 
						@on-popper-hide="poptipHide" 
						placement="bottom-start" 
						width="500">
						<Input v-model="water.endstrivname" size="small" placeholder="请选择"></Input>
						<div slot="content" style="overflow: hidden;">
							<div>
								<span>河涌代码&nbsp;&nbsp;<Input v-model="search.rivcode" size="small" placeholder="请输入" style="width: 100px;"></Input></span> &nbsp;&nbsp;
								<span>河涌名字&nbsp;&nbsp;<Input v-model="search.rivname" size="small" placeholder="请输入" style="width: 100px;"></Input></span>
								<span><Button @click.native="searchClick" type="text">查询</Button></span>
							</div>
							<div v-if="showEndRiver" style="margin-top: 5px;">
								<Table @on-row-click="endClick" :columns="table.thead" :data="table.tbody" height="200" size="small" border></Table>
								<Page :total="table.total" @on-change="pageChange" size="small" show-total class="pull-right" style="margin-top: 5px;"></Page>
							</div>
						</div>
					</Poptip>
				</div>
			</div>
			<div class="base-box">
				<div class="base-title" style="width: 65px;">起点桩号段</div>
				<div class="base-content">
					<Input v-model="water.endsegcode" size="small" placeholder="请输入"></Input>								
				</div>
			</div>
			<div class="base-box">
				<div class="base-title">终点经度</div>
				<div class="base-content">
					<Input v-model="water.mendlng" size="small" placeholder="请输入"></Input>								
				</div>
			</div>
			<div class="base-box">
				<div class="base-title">终点纬度</div>
				<div class="base-content">
					<Input v-model="water.mendlat" size="small" placeholder="请输入"></Input>
				</div>
			</div>
		</div>
		<div class="base-row">
			<div class="base-box">
				<div class="base-title"style="width: 80px;">终点宽度(m)</div>
				<div class="base-content">
					<Input-number v-model="water.endWidth" size="small" placeholder="请输入"></Input-number>
				</div>
			</div>
			<div class="base-box">
				<div class="base-title" style="width: 110px;">终点涌底高程(km2)</div>
				<div class="base-content">
					<Input-number v-model="water.endHeight" size="small" placeholder="请输入"></Input-number>
				</div>
			</div>
			<div class="base-box">
				<div class="base-title" style="width: 80px;">终点水船闸</div>
				<div class="base-content">
					<Select v-model="water.endShip" size="small" filterable>
						
					</Select>								
				</div>
			</div>
			<div class="base-box">
				<div class="base-title" style="width: 80px;">终点排灌泵站</div>
				<div class="base-content">
					<Select v-model="water.endPumping" size="small" filterable>
						
					</Select>							
				</div>
			</div>
		</div>	
		<div class="base-row">
			<div class="base-box">
				<div class="base-title">河涌长(m)</div>
				<div class="base-content">
					<Input v-model="water.rivlength" size="small" placeholder="请输入"></Input>								
				</div>
			</div>
			<div class="base-box">
				<div class="base-title">流经街道(m)</div>
				<div class="base-content">
					<Input v-model="water.byvilliage" size="small" placeholder="请输入"></Input>							
				</div>
			</div>
			<div class="base-box">
				<div class="base-title">属地管理权属描述</div>
				<div class="base-content">
					<Input v-model="water.chargevil" size="small" placeholder="请输入"></Input>								
				</div>
			</div>
			<div class="base-box">
				<div class="base-title">行政区划</div>			
				<div class="base-content">
					<Select v-model="water.unitcode" size="small"  filterable>
						<Option value="南海区" key="南海区"></Option>
						<Option value="里水镇" key="里水镇"></Option>
						<Option value="罗村街道" key="罗村街道"></Option>
						<Option value="九江镇" key="九江镇"></Option>
						<Option value="桂城街道" key="桂城街道"></Option>
						<Option value="东风水库" key="东风水库"></Option>
						<Option value="大沥镇" key="大沥镇"></Option>
						<Option value="西樵镇" key="西樵镇"></Option>
						<Option value="丹灶镇" key="丹灶镇"></Option>
						<Option value="狮山镇" key="狮山镇"></Option>
					</Select>				
				</div>
			</div>
		</div>
		<div class="base-row">
			<div class="base-box">
				<div class="base-title">已作废</div>
				<div class="base-content">
					<Checkbox v-model="water.invalidated"></Checkbox>							
				</div>
			</div>
			<div class="base-box">
				<div class="base-title">上锁</div>
				<div class="base-content">
					<Checkbox v-model="water.lockedriv"></Checkbox>						
				</div>
			</div>
			<div class="base-box"></div>
			<div class="base-box"></div>
			<div class="base-box"></div>
			<div class="base-box"></div>
		</div>
		<div class="base-row">
			<div class="base-box">
				<div class="base-title">河涌备注</div>
				<div class="base-content">
					<Input 
						v-model="water.remake" 
						size="small" 
						type="textarea" 
						class="base-textarea" 
						placeholder="请输入"></Input>								
				</div>
			</div>
		</div>
		<div class="base-row">
			<div class="base-box">
				<div class="base-title">河涌概括</div>
				<div class="base-content">
					<Input 
						v-model="water.rivdesc" 
						size="small" 
						type="textarea" 
						class="base-textarea" 
						placeholder="请输入"></Input>								
				</div>
			</div>
		</div>
		<div class="footer clear">
			<Button @click.native="_saveClick" class="pull-right" type="primary">保存</Button>
		</div>
	</div>
</template>

<script>
	import { singleWaterNetBase } from 'common/js/table'
import { cloneObj, successNotice, errorNotice } from 'common/js/dom'
import { ERR_OK } from 'api/config'
import { getWaterNetInfo, editWaterNetInfo } from 'api/aPicture'
import { mapGetters } from 'vuex'

export default {
		data () {
			return {
				search: {
					rivcode: '',
					rivname: ''
				},
				water: {
					rivprop: ''
				},
				table: {
					thead: singleWaterNetBase,
					tbody: [],
					total: null
				},
				showStartRiver: false,
				showEndRiver: false
			}
		},
		computed: {
			...mapGetters([
				'singleWaterNetInfo'
			])
		},
		created () {
			this.poptipPage = 1
		this._getWaterNetInfo()
		this.water = cloneObj(this.singleWaterNetInfo) || this.water
	},
		watch: {
			singleWaterNetInfo (newObj) {
				this.water = cloneObj(newObj) || this.water
		}
		},
		methods: {
			startClick (row) {
				this.water.startstrivname = row.rivname
			this.showStartRiver = false
		},
			endClick (row) {
				this.water.endstrivname = row.rivname
			this.showEndRiver = false
		},
			searchClick () {
				let obj = {}
			if (this.search.rivcode) {
					obj.rivcode = this.search.rivcode
			}
				if (this.search.rivname) {
					obj.rivname = this.search.rivname
			}
				this._getWaterNetInfo(1, obj)
		},
			poptipHide () {
				this.search.rivcode = ''
			this.search.rivname = ''
			if (this.poptipPage === 1 && this.table.tbody.length) {
					return
			}
				this.poptipPage = 1
			this._getWaterNetInfo()
		},
			pageChange (page) {
				this.poptipPage = page
			this._getWaterNetInfo(this.poptipPage)
		},
			_saveClick () {
				editWaterNetInfo(this.water).then(res => {
					if (res.code === ERR_OK) {
						successNotice('保存成功')
				} else {
						errorNotice('保存失败')
				}
				})
		},
			_getWaterNetInfo (page, searchValue) {
				getWaterNetInfo(page, searchValue).then(res => {
					if (res.code === ERR_OK) {
						this.table.tbody = res.result.result
					this.table.total = res.result.totalSize
				}
				})
		}
		}
	}
</script>

<style lang="scss">
	.singleWaterNet-model {
		.water-base {
			width: 100%;
			height: 100%;
			.base-row {
				display: flex;
				margin-bottom: 10px;
				.base-box {
					flex: 1;
					display: flex;
					align-items: center;
					margin: 0 5px;
					.base-title {
						width: 60px;
						text-align: center;
						font-size: 12px;
						margin-top: 2px;
					}
					.base-content {
						flex: 1;
						.base-textarea {
							textarea {
								height: 52px !important;								
							}
						}
					}
				}
				.base-box:nth-of-type(1) {
					margin-left: 0;
				}
			}
			.footer {
				padding-right: 20px;
				padding-top: 20px;
			}
		}
	}
</style>